<script setup>
import { reactive } from 'vue';
const obj = reactive({
  srcType: 'img',
  placeholderType: 'icon',
  src: 'https://cdn.quasar.dev/img/avatar5.jpg',
  icon: 'home',
  text: 'JSON',
  icon2: 'directions',
  size: '72px'
})
const emitSize = val => {
  obj.size = val
}
</script>
<template>
  <ul>
    <li>
      <t-button @click="obj.srcType = obj.srcType === 'icon' ? 'img' : 'icon'">当前src type: {{ obj.srcType }}</t-button>
    </li>
    <li>
      <t-button @click="obj.src = obj.src ? '' : 'https://cdn.quasar.dev/img/avatar5.jpg'">当前 src: {{ obj.src
      }}</t-button>
    </li>
    <li>
      <t-button @click="obj.icon = obj.icon ? '' : 'home'">当前 icon: {{ obj.icon }}</t-button>
    </li>
    <li>
      <t-button @click="obj.placeholderType = obj.placeholderType === 'icon' ? 'text' : 'icon'">当前placeholder type: {{
        obj.placeholderType }}
        (icon: {{ obj.icon2 }})(text: {{ obj.text }})
      </t-button>
    </li>
  </ul>

  <t-avatar abc="1233333333" :size="obj.size" font-size="52px" color="teal" text-color="white" :src-type="obj.srcType" :src="obj.src"
    :iconName="obj.icon" :placeholder-type="obj.placeholderType" :iconPlaceholder="obj.icon2" :text="obj.text" @emitSize="emitSize">
    <template v-slot:hover>
      <div style="cursor: pointer; color: red; bottom: 0; position: absolute;">
      </div>
    </template>
  </t-avatar>
</template>
